<template>
  <div>
    <!-- 卡片区域 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="dataCard">
          <strong>今日点击</strong>
          <div class="dataInfo">
            <div class="dataIcon" style="background-color: #ecedff;">
               <el-icon :size="25" color="#4a63ec">
                <UserFilled />
              </el-icon>
            </div>
            <span class="dataNum">{{ todayClickNum }}</span>
            <span class="unit">单位/次</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="dataCard">
          <strong>今日ECPM</strong>
          <div class="dataInfo">
            <div class="dataIcon" style="background-color: #e8f7ff;">
               <el-icon :size="25" color="#1182d9">
                <HelpFilled />
              </el-icon>
            </div>
            <span class="dataNum" style="width: 105px; overflow: hidden;">{{ todayEcpmNum }}</span>
            <span style="margin-top: 7px;">...</span>
            <span class="unit">单位/元</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="dataCard">
          <strong>今日曝光成功</strong>
          <div class="dataInfo">
            <div class="dataIcon" style="background-color: #dcfde9;">
               <el-icon :size="25" color="#46c777">
                <SuccessFilled />
              </el-icon>
            </div>
            <span class="dataNum">{{ todayAdShowNum }}</span>
            <span class="unit">单位/条</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="dataCard">
          <strong>今日曝光失败</strong>
          <div class="dataInfo">
            <div class="dataIcon" style="background-color: #fbf4e6;">
               <el-icon :size="25" color="#ffc655">
                <WarnTriangleFilled />
              </el-icon>
            </div>
            <span class="dataNum">{{ todayAdShowFailNum }}</span>
            <span class="unit">单位/条</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <br/>
    <!-- 搜索区域 -->
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateSelect"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            @change="dateChange"
          />
        </el-form-item>
        <el-form-item label="广告类型">
          <el-select v-model="formData.type" clearable placeholder="请选择广告类型" style="width: 200px;">
            <el-option label="开屏" value="KP" />
            <el-option label="原生" value="oppoZXR" />
          </el-select>
        </el-form-item>
        <el-form-item label="广告ID">
          <el-input placeholder="" clearable v-model="formData.adid" />
        </el-form-item>
        <el-form-item label="链接">
          <el-input placeholder="" clearable v-model="formData.linkType" />
        </el-form-item>
        <el-form-item label="包名">
          <el-input placeholder="" clearable v-model="formData.package" />
        </el-form-item>
        <el-form-item label="oaid">
          <el-input placeholder="" clearable v-model="formData.oaid" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="searchHandler">查询</el-button>
        </el-form-item>
      </el-form>
    
    <!-- 表格区域 -->
    <div class="form_container">
      <el-table :data="tableData">
        <el-table-column type="index" label="#"/>
        <el-table-column prop="adid" label="广告ID" width="100" />
        <!-- <el-table-column prop="status" label="状态" width="100" align="center"/> -->
        <!-- <el-table-column prop="code" label="code" width="80" align="center">
          <template #header>
            <el-tooltip class="box-item" effect="dark" content="Top Left prompts info" placement="top">
              <template #content>
                1234：原生展示成功<br />
                200：banner展示成功<br />
                666：开屏曝光成功<br />
                2000：未开屏或者开屏失败<br />
                804：广告切后台<br />
                1106：广告展示失败<br />
                1104：无合适的广告<br />
                1100：频繁调用相关的 API<br />
              </template>
              <div class="code_tip">
                <span class="tip_title">code</span>
                <el-icon size="15" color="#999999">
                  <QuestionFilled />
                </el-icon>
              </div>
            </el-tooltip>
          </template>
          <template #default="scope">
            <div class="status_box">
              <span v-if="scope.row.code == '1234' || scope.row.code == '200' || scope.row.code == '666'" class="status_round_success"></span>
              <span v-else class="status_round_fail"></span>
              <span class="status_value">{{  scope.row.code  }}</span>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column prop="link_type" label="链接" width="120" align="center" />
        <el-table-column prop="package" label="包名" width="100" align="center"/>
        <el-table-column prop="page" label="页面" width="100" align="center"/>
        <el-table-column prop="type" label="广告类型" width="100" align="center">
          <template #default="scope">
            <el-tag type="primary" effect="dark" round v-if="scope.row.type == 'KP'">开屏</el-tag>
            <el-tag type="success" effect="dark" round v-else-if="scope.row.type == 'oppoZXR'">原生</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="oaid" label="oaid" width="400" align="center">
          <template #default="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.oaid" placement="top">
              <span @click="copyOaid(scope.row.oaid)">{{ scope.row.oaid.slice(0, 40) }}...</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="fir_add_time" label="时间" width="180" align="center"/>
      </el-table>
      <br/>
      <!-- 分页器 -->
      <el-pagination
        v-model:currentPage="pageNo"
        v-model:page-size="limit"
        @current-change="getAdData"
        @size-change="sizeChange"
        :page-sizes="[10, 20, 30]"
        background 
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="total" />
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { UserFilled, SuccessFilled, WarnTriangleFilled, HelpFilled, QuestionFilled } from '@element-plus/icons-vue'
import { ref, onMounted, computed } from "vue";
import { getList, geEcpmList, getAdShowList } from "@/api/page/list1"

// 分页器当前页码
let pageNo = ref(1)
// 每一页展示多少条数据
let limit = ref(10)
// 数据总条数
let total = ref(0)
// 分页的下拉菜单发生改变时触发
const sizeChange = () => {
    pageNo.value = 1
    getAdData()
}

 // 计算出当前年月日
  const currentDate = computed(() => {
    // 创建 Date 对象
    const now = new Date()
    // 获取年、月、日（月份需 +1）
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0') // 补零
    const day = String(now.getDate()).padStart(2, '0') // 补零
    // 组合成 YYYY-MM-DD 格式
    const dateString = `${year}-${month}-${day}`
    return dateString
  })

// 卡片数据
let todayClickNum = ref(0) // 今日点击数
let todayEcpmNum = ref(0) // 今日ecpm数
let todayAdShowNum = ref(0) // 今日广告曝光成功数
let todayAdShowFailNum = ref(0) // 今日广告曝光失败数

  // 时间范围
  const dateSelect = ref('')
  const dateChange = (val) => {
    dateSelect.value = val
    if (val && Array.isArray(val)) {
      formData.value.dataStart = val[0]
      formData.value.dataEnd = val[1]
    } else {
      formData.value.dataStart = ''
      formData.value.dataEnd = ''
    }
  }

// 表单数据收集
  const formData = ref({
    page: pageNo.value,
    pages: limit.value,
    dataStart: '',
    dataEnd: '',
    type: '',
    adid: '',
    linkType: '',
    package: '',
    pageName:'',
    status: '',
    oaid: ''
  })

const tableData = ref([])

// 获取列表数据
const getAdData = async () => {
  let res = await getList(Object.assign(formData.value, {
    page: pageNo.value, // 页号
    pages: limit.value // 每页数量
  }))
  tableData.value = res.data
  total.value = res.total
  console.log("广告点击数据", res)
}

// 点击搜索按钮
  const searchHandler = () => {
    pageNo.value = 1
    getAdData()
  }

// 获取卡片数据，今日点击
const cardClickData = async () => {
  let res = await getList({
    page: pageNo.value,
    pages: limit.value,
    dataStart: currentDate.value,
    dataEnd: currentDate.value,
    type: '',
    adid: '',
    linkType: '',
    package: '',
    pageName:'',
    status: '',
  })
  todayClickNum.value = res.total
}

// 获取卡片数据，今日ECPM
const cardEcpmData = async () => {
  let res = await geEcpmList({
    page: pageNo.value,
    pages: limit.value,
    dataStart: currentDate.value,
    dataEnd: currentDate.value,
    type: '',
    adid: '',
    linkType: '',
    package: ''
  })
  todayEcpmNum.value = res.sum_ecpm
}

// 获取卡片数据，今日曝光成功
const cardShowData = async () => {
  let res = await getAdShowList({
    page: pageNo.value,
    pages: limit.value,
    dataStart: currentDate.value,
    dataEnd: currentDate.value,
    type: '',
    adid: '',
    linkType: '',
    package: '',
    status: '1'
  })
  todayAdShowNum.value = res.total
}

// 获取卡片数据，今日曝光失败
const cardFailData = async () => {
  let res = await getAdShowList({
    page: pageNo.value,
    pages: limit.value,
    dataStart: currentDate.value,
    dataEnd: currentDate.value,
    type: '',
    adid: '',
    linkType: '',
    package: '',
    status: '0'
  })
  todayAdShowFailNum.value = res.total
}

// 复制oaid
const copyOaid = (oaid) => {
    let input = document.createElement('textarea')
    input.value = oaid
    document.body.appendChild(input)
    input.select()
    document.execCommand('copy')
    document.body.removeChild(input)
    ElMessage({
        message: '复制成功',
        type: 'success',
        plain: true
  })
}

// 组件挂载完毕
onMounted(() => {
  getAdData()
  cardClickData()
  cardEcpmData()
  cardShowData()
  cardFailData()
})
</script>

<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
  .dataCard{
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
    strong{
      color: #000000;
      font-size: 16px;
    }
    .dataInfo{
      padding: 15px 0;
      padding-bottom: 5px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 10px;
      .dataIcon{
        width: 55px;
        height: 55px;
        border-radius: 55px;
        background-color: #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .dataNum{
        color: #000000;
        font-size: 28px;
        margin-left: 20px;
      }
      .unit{
        color: #999999;
        font-size: 12px;
        margin-top: 12px;
        margin-left: auto;
      }
    }
  }
  .code_tip{
    display: flex;
    align-items: center;
    justify-content: center;
    .tip_title{
      margin-right: 3px;
    }
  }
  .status_box{
    display: flex;
    align-items: center;
    justify-content: center;
    .status_round_success{
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 10px;
      background-color: #67c23a;
      margin-right: 5px;
    }
    .status_round_fail{
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 10px;
      background-color: #f56c6c;
      margin-right: 5px;
    }
  }
</style>